<template>
    <div>
        <!-- 搜索框 -->
        <van-sticky class="hear">
            <div class="search">
                <div class="logoWrap">
                    <img src="../assets/image/xizhilang.jpg">
                </div>
                <!-- focus输入框获得焦点时触发 -->
                <van-search
                    @focus="$router.push('/home/index/search')"
                    placeholder="请输入搜索关键词"
                />
            </div>
        </van-sticky>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in lunboData" :key="item.img">
                <img :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :column-num="4">
            <van-grid-item v-for="item in gridData" :key="item.src">
                <div class="my-grid-item">
                    <img :src="item.src" alt="">
                    <span class="text">{{ item.text }}</span>
                </div>
            </van-grid-item>
        </van-grid>
        <!-- <router-link to="/goodslist">商品列表</router-link><br>
        <router-link to="/order">我的订单</router-link> -->

    </div>
</template>

<script>
import { fetchLunbo } from "../api/home.js";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
import menu1 from "../assets/image/1.png";
export default {
    name:"Home",
    data() {
        return {
            lunboData:[],
            page:1,
            limit:10,
            gridData: [
                { src: menu1, text: "乐淘超市1" },
                { src: menu2, text: "乐淘超市2" },
                { src: menu3, text: "乐淘超市3" },
                { src: menu4, text: "乐淘超市" },
                { src: menu5, text: "乐淘超市" },
                { src: menu6, text: "乐淘超市" },
                { src: menu7, text: "乐淘超市" },
                { src: menu8, text: "乐淘超市" },

            ],
            goodsList:[],
        }
    },
    created() {
        this._fetchLunbo();
    },
    methods:{
        // 轮播图数据
        async _fetchLunbo(){
            let data = await fetchLunbo()
            this.lunboData = data.message;
        }
    },
    // components:{
    //     BackTop
    // }
}
</script>  

<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.hear {
    background-color: white;
  .search {
    display: flex;
    align-items: center;
    .logoWrap {
      width: 50px;
      height: 54px;
      padding: 5px 5px;
      img {
        // width: 100%;
        height: 46px;
      }
    }
    .van-search {
      flex: 1;
    }
  }
}
.my-swipe {
        .van-swipe-item {
            height: 200px;

            img {
                width: 100%;
                height: 100%;
        }
    }
}
</style>